<template>
  <div>
<van-nav-bar
  title="注册"
  left-text="返回"
  right-text="按钮"
  left-arrow
/>
<center><p></p>
<h3 style="font-family: 华文行楷;">欢迎来到猪八戒网登录页面</h3>
<div class="aaa">


  <p><el-input placeholder="请输入图片验证码" class="input-with-select" v-model="imgcode">
  <el-button slot="append">
  <img :src="imgurl" height="32px" width="80px" @click="getimg">
  </el-button>
  </el-input></p>
  
  <p><el-input placeholder="请输入手机号" class="input-with-select" v-model="mobile">
  <el-button slot="append" @click="getsmscode" :disabled='fig'>{{this.btime}}

  </el-button>
  </el-input></p>

  <p><el-input placeholder="请输入短信验证码" class="input-with-select" v-model="smscode">
  <el-button slot="append" @click="login">点击注册

  </el-button>
  </el-input></p>
<p></p>
<el-select v-model="value" placeholder="请选择您的身份">
    <el-option
      v-for="item in rolelist"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>



</div>
</center>
<van-tabbar>
  <van-tabbar-item icon="home-o">主页</van-tabbar-item>
  <van-tabbar-item icon="search">搜索</van-tabbar-item>
  <van-tabbar-item icon="friends-o">好友</van-tabbar-item>
  <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
</van-tabbar>
  </div>
</template>

<script>
import {v4 as uuid} from "uuid"
export default {
  data(){
    return{
      mobile:'',
      smscode:'',
      imgcode:'',
      imgurl:'',
      img_url:"http://localhost:8000/user/imgcode/?uuid=",
      uuid1:'',
      btime:'获取短信验证码',
      fig:false,
      time:60,
      rolelist:[],
      value:''
    }
  },
  methods:{
    getimg(){
      this.uuid1=uuid()
      this.imgurl=this.img_url+this.uuid1
    },
    getsmscode(){
      if(this.imgcode=="" || this.imgcode==null){
        alert("图片验证码为空")
        return
      }
      var pdcode=/^1[3-9]\d{9}$/
      if(!pdcode.test(this.mobile)){
        alert("手机号格式错误")
        return
      }
      this.axios.post("/smscode/",{uuid:this.uuid1,mobile:this.mobile,imgcode:this.imgcode})
      .then((cg)=>{
        alert(cg.data.msg)
        if(cg.data.code==200){
          var t=setInterval(()=>{
            if(this.time==0){
              clearInterval(t)
              this.fig=false
              this.btime="获取短信验证码"
        }else{
          this.time--
          this.btime="请在"+"("+this.time+")"+'秒后重试'
          this.fig=true
        }
            
          },1000)
          
          }
          
      })
    },
    login(){
      var pdcode=/^1[3-9]\d{9}$/
      if(!pdcode.test(this.mobile)){
        alert("手机号格式错误")
        return
      }
      if(this.smscode=="" ||this.smscode==null){
         
        alert("请输入短信验证码")
        return}
      if(this.value=="" ||this.value==null){
         
        alert("请选择您的身份")
        return}
         this.axios.post("mobile_register/",{smscode:this.smscode,mobile:this.mobile,value:this.value}).then((cg)=>{
         if(cg.data.code==200){
            alert(cg.data.msg)
            localStorage.setItem("token",cg.data.token)
            localStorage.setItem("uid",cg.data.userid)
            localStorage.setItem("role_list",JSON.stringify(cg.data.role_list))
         }else
         {
          alert(cg.data.msg)
         }
        })
      },
    getrole(){
      this.axios.get("get_role/").then((cg)=>{
        this.rolelist=(cg.data.msg)

      })
    }
     
      
  },
  mounted(){
    this.getimg()
    this.getrole()
  }

}
</script>

<style>
.aaa{
  width: 400px;
}
</style>
